<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>菜单维护</title>

		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>

		<style>
			.page {
				position: fixed;
				bottom: 0;
				height: 35%;
				width: 95%;
				text-align: center;
			}
		</style>
	</head>

	<body>

		<div id="app">
			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="标题">
						<el-input v-model="formInline.label" placeholder="标题"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="selectTj">查询</el-button>
						<el-button type="warning" @click="open">增加菜单</el-button>
					</el-form-item>
				</el-form>
			</fieldset>


			<!-- 全部信息开始 -->
			<el-table size="big" :data="tableData" border style="width: 100%" :cell-style="{'text-align':'center'}"
				:header-cell-style="{'text-align':'center'}">
				<el-table-column prop="label" label="标题" width="230">
				</el-table-column>
				<el-table-column prop="href" label="链接地址" width="320">
				</el-table-column>
				<el-table-column prop="parentid" label="所属父" width="120">
				</el-table-column>
				<el-table-column prop="remark" label="备注">
				</el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<el-button type="primary" size="mini"
							@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="page">
				<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
					:total="tocal" :page-size="pagesize">
				</el-pagination>
			</div>
			<!-- 分页 -->

			<!-- 全部信息结束 -->



			<!-- 增加菜单开始 -->
			<el-dialog title="增加菜单" :visible.sync="dialogVisible" width="50%">
				<el-form ref="form" :model="sizeForm" label-width="100px" size="mini">
					<el-form-item label="标题">
						<el-input v-model="sizeForm.label"></el-input>
					</el-form-item>
					<el-form-item label="链接地址">
						<el-input v-model="sizeForm.href"></el-input>
					</el-form-item>


					<el-form-item label="所属父菜单">
						<el-select v-model="sizeForm.parentid" filterable placeholder="请选择活动区域">
							<el-option v-for="item in parentidoptions1" :key="item.id" :label="item.label"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>


					<el-form-item label="备注">
						<el-input v-model="sizeForm.remark"></el-input>
					</el-form-item>
				</el-form>

				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
				</span>
			</el-dialog>
			<!-- 增加菜单结束 -->



			<!-- 修改菜单开始 -->
			<el-dialog title="编辑菜单" :visible.sync="dialogFormVisible">

				<el-form ref="form1" :model="sizeForm1" label-width="100px" size="mini">
					<el-form-item label="标题" prop="label">
						<el-input v-model="sizeForm1.label"></el-input>
					</el-form-item>
					<el-form-item label="链接地址" prop="href">
						<el-input v-model="sizeForm1.href"></el-input>
					</el-form-item>

					<el-form-item label="所属父菜单">
						<el-select v-model="sizeForm1.parentid" filterable placeholder="请选择活动区域">
							<el-option v-for="item in parentidoptions1" :key="item.id" :label="item.label"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="备注" prop="remark">
						<el-input v-model="sizeForm1.remark"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dian">确 定</el-button>
				</div>
			</el-dialog>


		</div>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					tableData: [],
					formInline: {
						label: ''
					},

					//增加菜单
					dialogVisible: false,

					sizeForm: {
						label: '',
						href: '',
						parentid: '',
						remark: ""
					},
					//编辑菜单
					sizeForm1: {
						label: '',
						href: '',
						parentid: '',
						remark: ""
					},

					dialogFormVisible: false,

					formLabelWidth: '120px',

					parentidoptions: [], //父级菜单下拉列表原始值
					parentidoptions1: [],

					page: 1, //当前第几页
					tocal: 0, //总条数
					pagesize: 5 //每页条数
				},
				methods: {
					handleCurrentChange(val) { //分页
						this.page = val //设置当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					//修改查询
					handleEdit(index, row) {
						this.dialogFormVisible = true

						this.getParentMent()
						var that = this
						// alert(JSON.stringify(this.parentidoptions))
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "menu/upselect", {
							"id": row.id
						}).then(function(res) {
							// alert(JSON.stringify(res.data.data.one));
							that.sizeForm1 = res.data.data.one

						}).catch(err => {
							console.log(err)
						});
					},
					//删除
					handleDelete(index, row) {
						var that = this
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "menu/del/" + row.id).then(function(res) {

							if (res.data.code == 200) {
								//删除成功
								that.$message('删除成功')

								that.page = 1
								that.initdata()
							}

						}).catch(err => {
							console.log(err)
						});
					},
					//添加
					onSubmit() {
						//执行业务提交
						this.dialogVisible = false

						var that = this
						//获取所属父菜单数据
						axios.post(HTTP + "menu/add", this.sizeForm).then(function(res) {

							if (res.data.code == 200) {
								that.$message('添加成功')
							}
						}).catch(err => {
							console.log(err)
						});

					},

					dian() { //修改数据提交

						console.log('submit!');

						this.dialogFormVisible = false
						var that = this
						//获取所属父菜单数据
						axios.post(HTTP + "menu/up", this.sizeForm1).then(function(res) {
							if (res.data.code == 200) {
								that.$message('修改成功')
							}

						}).catch(err => {
							console.log(err)
						});

					},
					open() { //增加菜单
						this.dialogVisible = true
						//加载所属父菜单数据
						this.getParentMent()
					},
					getParentMent() {
						var that = this
						//获取所属父菜单数据
						axios.post(HTTP + "menu/selectment", {
							"parentid": 0
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.parentidoptions1 = res.data.data.list
							that.parentidoptions1.push({
								"id": 0,
								"label": "新的一级菜单"
							})

						}).catch(err => {
							console.log(err)
						});
					},
					//查询
					initdata() {
						var that = this
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "menu/select/" + this.page).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.pageInfo.list
							that.tocal = res.data.data.pageInfo.total

						}).catch(err => {
							console.log(err)
						});
					},

					selectTj() {
						//根据条件查询
						var that = this
						//alert(JSON.stringify(this.formInline))
						axios.post(HTTP + "menu/selectTj/" + this.page, this.formInline).then(
							function(
								res) {
								//alert(JSON.stringify(res));
								that.tableData = res.data.data.rolePageInfo.list
								that.tocal = res.data.data.rolePageInfo.total

							}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() { //vue生命周期的方法
					//发送ajax请求到后端接口，获取json数据
					this.initdata()

				}
			})
		</script>
	</body>

</html>